<template>
	<view class="content">
		<view class="header">
			<view class="dateStype">
				<text>{{year}}.{{month}}.{{day}}</text>
				<text>{{dayOfWeek}}</text>
				<text>{{hour}}:{{minutes}}:{{seconds}}</text>
			</view>
			<view class="tianStyle">
				<text>天气晴</text>
				<text>10~20℃</text>
			</view>
		</view>
    <view class="main">
      <view class="main-left">
        <view class="main-left-top">
          <view class="main-left-top-orgData">机构平台累计数据</view>
          <view class="main-left-top-img-view">
            <img src="/static/images/main-left-top-hr.png"></img>
          </view>
          <view class="main-left-top-data">
            <view class="main-left-top-data-view orgNumBg">
              <img src="/static/images/main-lef-top-orgNum.png">
              <view class="main-left-top-data-view-value">1946</view>
              <view>机构数</view>
            </view>
            <view class="main-left-top-data-view stuNumBg">
              <img src="/static/images/main-lef-top-stuNum.png">
              <view class="main-left-top-data-view-value">1946</view>
              <view>学生数</view>
            </view>
            <view  class="main-left-top-data-view teacherNumBg">
              <img src="/static/images/main-lef-top-teaNum.png">
              <view  class="main-left-top-data-view-value">1946</view>
              <view>教师数</view>
            </view>


          </view>
        </view>
        <view class="main-left-bottom">
          <view class="main-left-bottom-title">
            <view class="main-left-bottom-title-top">
               <span>四川省</span>
            </view>
            <view class="main-left-bottom-title-bottom">
               <span class="title-num">888</span>
               <span class="title-unit">家</span>
            </view>
          </view>
          <view class="main-left-bottom-content">
            <el-table :data="tableData">
              <el-table-column
                  prop="area"
                  label="机构区域">
              </el-table-column>
              <el-table-column
                  prop="num"
                  label="数量">
              </el-table-column>
              <el-table-column
                  prop="percentage"
                  label="比例">
              </el-table-column>
            </el-table>
          </view>
        </view>
      </view>
      <view class="main-right">
        <view class="main-right-top">
          <view class="main-right-top-left">
            <div id="china-map"></div>
          </view>
          <view class="main-right-top-right">
            <view class="main-right-top-right-exit">
              <img src="/static/images/exit.png" @click="logout">
            </view>
            <view class="main-right-top-right-data">
              <view class="main-left-top-orgData">排行榜</view>
              <view class="main-left-top-img-view">
                <img src="/static/images/main-left-top-hr.png"></img>
              </view>
              <view class="paihangbangChart">
                <div ref="chart" style="height: 45vh"></div>
              </view>
            </view>
          </view>
        </view>
        <view class="main-right-bottom">
          <view class="main-right-bottom-top">
            <view class="main-right-bottom-top-title">
              <view class="main-left-top-orgData">平台实时数据变化</view>
              <view class="main-left-top-img-view">
                <img src="/static/images/main-left-top-hr.png"></img>
              </view>
            </view>
            <view  class="main-right-bottom-top-detail">
              <span>进入平台查看详细信息</span>
            </view>
          </view>
          <view class="main-right-bottom-bottom">
            <div class="main-right-bottom-bottom-data">
              <div class="iconDiv one">
                <img src="/static/images/16468@1x.png">
              </div>
              <div class="num">17</div>
              <div class="title">新增机构数</div>
            </div>
            <div class="main-right-bottom-bottom-data">
              <div class="iconDiv two">
                <img src="/static/images/16469@1x.png">
              </div>
              <div class="num">121</div>
              <div class="title">新增学生数</div>
            </div>
            <div class="main-right-bottom-bottom-data">
              <div class="iconDiv three">
                <img src="/static/images/16470@1x.png">
              </div>
              <div class="num">46</div>
              <div class="title">新增教师数</div>
            </div>
            <div class="main-right-bottom-bottom-data">
              <div class="iconDiv four">
                <img src="/static/images/16471@1x.png">
              </div>
              <div class="num">57451</div>
              <div class="title">评估使用次数</div>
            </div>
            <div class="main-right-bottom-bottom-data">
              <div class="iconDiv five">
                <img src="/static/images/16468@1x.png">
              </div>
              <div class="num">84521</div>
              <div class="title">课程计划生成数</div>
            </div>
            <div class="main-right-bottom-bottom-data">
              <div class="iconDiv six">
                <img src="/static/images/16473@1x.png">
              </div>
              <div class="num">11.24</div>
              <div class="title">系统登录数据</div>
            </div>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
import { removeToken } from '@/utils/auth'
import * as echarts from 'echarts';
import {getPlatformStatistics} from '@/api/index'
import '@/utils/echarts/map/js/china.js';
import geoJson from '@/utils/echarts/map/json/china.json'
echarts.registerMap('china', geoJson)

export default {
		data() {
			return {
        provinceInfo: [
          {
            name: "北京",
            oredrNum: 599,//订单数量
            goodsNum: 599,//货品数量
          },
          {
            name: "上海",
            oredrNum: 142,
            goodsNum: 599,
          },
          {
            name: "黑龙江",
            oredrNum: 44,
            goodsNum: 599,
          },
          {
            name: "深圳",
            oredrNum: 92,
            goodsNum: 599,
          },
          {
            name: "湖北",
            oredrNum: 810,
            goodsNum: 599,
          },
          {
            name: "四川",
            oredrNum: 453,
            goodsNum: 599,
          },
          {
            name: "新疆",
            oredrNum: 36,
            goodsNum: 31,
          },
          {
            name: "福建",
            oredrNum: 106,
            goodsNum: 30211111,
          },
        ],
        tableData:[
            {
              area: '成都市',
              num:'31',
              percentage:'13%',
            },
            {
              area: '成都市',
              num:'31',
              percentage:'13%',
            },
            {
              area: '成都市',
              num:'31',
              percentage:'13%',
            },
            {
              area: '成都市',
              num:'31',
              percentage:'13%',
            },
            {
              area: '成都市',
              num:'31',
              percentage:'13%',
            },
            {
              area: '成都市',
              num:'31',
              percentage:'13%',
            },
            {
              area: '成都市',
              num:'31',
              percentage:'13%',
            },
        ],
				title: 'Hello',
				year: '',
				month: '',
				day: '',
				hour: '',
				minutes:'',
				seconds:'',
				dayOfWeek: '',
			}
		},
		onLoad() {
			setInterval(()=>{
				this.getCurrentTime()
			},1000);
      console.log("onLoad............")
      let areaId = 510000
      getPlatformStatistics(areaId).then(resp=>{
        console.log("获取平台基础统计信息",resp)
      })
		},
    mounted() {
      // 当组件挂载后，初始化图表
      console.log("mounted............")
      this.initChart();
      this.drawCharts();
    },
		methods: {
      logout(){
        this.$confirm('确定注销并退出系统吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeToken();
          uni.navigateTo({
            url: '/pages/login/index'
          });
        }).catch(() => {});

      },
      drawCharts () {
        // 基于准备好的dom，初始化echarts实例
        let chinaMap = echarts.init(document.getElementById("china-map"));
        window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
        chinaMap.setOption({
          // 进行相关配置
          tooltip: {
            // 鼠标移到图里面的浮动提示框
            backgroundColor: 'rgba(0,0,0,0.5)',//提示框背景色
            borderColor: 'rgba(0,0,0,0)',//边框夜色
            textStyle: {
              color: 'rgba(255, 255, 255, 1)'//文字颜色
            },
            //自定义提示框自动调用函数
            formatter: function (params) {
              let showname = params;
              let html =  `
                <div style='width:100%;height:60px'>
                    <p style="font-size:12px" >${showname.data ? showname.data.name : '信息'}</p>
                    <p style="font-size:12px" >订单总数:${showname.data ? showname.data.oredrNum : '信息'}</p>
                    <p style="font-size:12px">货品数量:${showname.data ? showname.data.goodsNum : '信息'}</p>
              </div>`

              return `门店数量\n${showname.data.oredrNum ? showname.data.oredrNum : '0'} 家`;
            }
          },
          dataRange: {
            show: false,
            min: 0,
            max: 1000,
            text: ["High", "Low"],
            realtime: true,
            calculable: true,
            color: ["#fd7b78"],
          },
          geo: {
            // 这个是重点配置区
            map: "china", // 表示中国地图
            // roam: true, //是否允许放大
            label: {
              normal: {
                show: true, // 是否显示对应地名
                textStyle: {
                  color: "#fff", //对应地名颜色
                  fontSize: '1rem'
                },
              },
            },
            //点击变色
            select: {
              itemStyle: {
                areaColor: "#fd7b88", //点击之后的省份颜色
              },
            },
            itemStyle: {
              normal: {
                textStyle: {
                  color: '#fff',
                },
                //正常状态下的地图背景色
                borderColor: "#fff",
                borderWidth: "0.5",
                color: new echarts.graphic.LinearGradient( // 渐变色
                    0,
                    0,
                    1,
                    0, // 渐变色的起止位置, 右/下/左/上
                    [
                      // offset 位置
                      { offset: 0.8, color: '#f2aca0' },
                      { offset: 0, color: '#fd7b78' }
                    ]
                )
              },
              emphasis: {
                areaColor: null,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,//聚焦时候的阴影范围
                borderWidth: 0,
                shadowColor: "#f04b30",//聚焦时候的阴影颜色
                // 鼠标放上去地图区域背景颜色
                areaColor: '#fd7b78',//聚焦之后的颜色
                borderWidth: 0
              },
            },
          },
          series: [
            {
              type: "scatter",
              coordinateSystem: "geo", // 对应上方配置
            },
            {
              // name: "启动次数", // 浮动框的标题
              type: "map",
              geoIndex: 0,
              data: this.provinceInfo
            },
          ],
        });
        // 地图打点-----
        let cityData = [
          {
            name: "北京",
            oredrNum: 599,//订单数量
            goodsNum: 599,//货品数量
          },
          {
            name: "天津",
            ename: "天津",
          },
          {
            name: "上海",
            oredrNum: 142,
            goodsNum: 599,
          },
          {
            name: "重庆",
            ename: "重庆",
          },
          {
            name: "河北",
            ename: "河北",
          },
          {
            name: "河南",
            ename: "河南",
          },
          {
            name: "云南",
            ename: "云南",
          },
          {
            name: "辽宁",
            ename: "辽宁",
          },
          {
            name: "黑龙江",
            oredrNum: 44,
            goodsNum: 599,
          },
          {
            name: "湖南",
            ename: "湖南",
          },
          {
            name: "安徽",
            ename: "安徽",
          },
          {
            name: "山东",
            ename: "山东",
          },
          {
            name: "新疆",
            oredrNum: 1,//订单数量
            goodsNum: 599,//货品数量
            ename: "新疆",
          },
          {
            name: "江苏",
            ename: "江苏",
          },
          {
            name: "浙江",
            value: 3,
            ename: "浙江",
          },
          {
            name: "江西",
            ename: "江西",
          },
          {
            name: "湖北",
            oredrNum: 810,
            goodsNum: 599,
          },
          {
            name: "广西",
            ename: "广西",
          },
          {
            name: "甘肃",
            ename: "甘肃",
          },
          {
            name: "山西",
            ename: "山西",
          },
          {
            name: "内蒙古",
            ename: "内蒙古",
          },
          {
            name: "陕西",
            ename: "陕西",
          },
          {
            name: "吉林",
            ename: "吉林",
          },
          {
            name: "福建",
            oredrNum: 106,
            goodsNum: 30211111,
          },
          {
            name: "贵州",
            ename: "贵州",
          },
          {
            name: "广东",
            value: 53,
            ename: "广东",
          },
          {
            name: "青海",
            ename: "青海",
          },
          {
            name: "西藏",
            ename: "西藏",
          },
          {
            name: "四川",
            oredrNum: 453,
            goodsNum: 599,
          },
          {
            name: "宁夏",
            ename: "宁夏",
          },
          {
            name: "海南",
            ename: "海南",
          },
          {
            name: "台湾",
            ename: "台湾",
          },
          {
            name: "香港",
            ename: "香港",
          },
          {
            name: "澳门",
            ename: "澳门",
          },
        ];
        const geoCoordMap = {
          /*广东: [113.75, 23.04,],
          黑龙江: [128.34, 47.05],
          北京: [116.40, 40.40],
          新疆: [86.61, 40.79,],
          内蒙古: [112.17, 42.81],
          青海: [97.07, 35.62],
          西藏: [89.13, 30.66],*/
        }
        this.convertData = (data) => {
          let res = [];
          for (let i = 0; i < data.length; i++) {
            let geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value),//将上面数组的value添加到经纬度后面
                oredrNum: data[i].oredrNum ? data[i].oredrNum : '0',
                goodsNum: data[i].goodsNum ? data[i].goodsNum : '0',
              });
            }
          }
          return res;
        };
        this.getMapChart(cityData);
      },

      //处理涟漪特效的函数
      getMapChart (data) {
        let myChart = this.$echarts.init(document.getElementById("china-map"));
        let option = {
          tooltip: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
          series: [
            {
              type: "effectScatter",//图例类型
              coordinateSystem: "geo",//使用geo地图
              symbol: "image://",//图例样式
              // symbol: "image://",//图例样式
              showEffectOn: "emphasis",//涟漪特效何时触发
              symbolSize: 20,//图例大小,
              symbolOffset: [0, -10],
              rippleEffect: {//特效设置
                scale: 2.5,
                color: "rgba(207, 55, 55, 1)",
                number: 3
              },
              showEffectOn: "render",
              data: this.convertData(data),
            },
          ],
        };
        myChart.on("click", (params) => {
        });
        myChart.setOption(option);
        window.onresize = () => {
          myChart.resize();
        }
      },
      initChart() {
        // 获取 DOM 元素
        const chartDom = this.$refs.chart;
        console.log("chartDom",chartDom);
        console.log("echarts",echarts);
        // 初始化 ECharts 实例
        const myChart = echarts.init(chartDom);
        console.log("myChart",myChart);
        // 配置图表选项
        const option = {
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['四川', '云南', '贵州', '湖北', '湖南','江西','山西','福建','安徽']
          },
          series: [
            {
              data: [999, 1000, 1500, 2233, 5567, 6666, 8860, 8800, 8888],
              type: 'bar',
              // 通过设置系列的 name 属性为柱状图添加名称
              name: '销量',
              label: {
                show: true,
                position: 'right'
              }
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表
        option && myChart.setOption(option);
      },
			getTwoTime(time){
				return time<10?('0'+time):time;
			},
			getCurrentTime(){
				// 获得年月日
				let date = new Date();
				this.year = date.getFullYear();
				this.month = this.getTwoTime(date.getMonth()+1);
				this.day = this.getTwoTime(date.getDate());
				this.hour = this.getTwoTime(date.getHours());
				this.minutes = this.getTwoTime(date.getMinutes());
				this.seconds = this.getTwoTime(date.getSeconds());
				this.dayOfWeek = this.getDayOfWeek(date)
			},
			 getDayOfWeek(date) {
				  const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				  return days[date.getDay()];
			},
		}
	}
</script>

<style  lang="scss" scoped>
    .main-right-bottom-bottom{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      .main-right-bottom-bottom-data{
        width: 240rpx;
        border: 1px solid;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30rpx 0rpx;
        background: white;
        border-radius: 20rpx;
      }
      .num{
        padding: 20rpx 0rpx;
        font-size: 48rpx;
        font-weight: 600;
      }
      .title{
        font-size: 30rpx;
        font-weight: 600;
        color: #666666;
      }
      .iconDiv {
        width: 100rpx;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100rpx;
      }
      .one{
        background-color: #FD85A2;
      }
      .two{
        background-color: #FEBD2A;
      }
      .three{
        background-color: #FF8753;
      }
      .four{
        background-color: #18DCA7;
      }
      .five{
        background-color: #51D5FF;
      }
      .six{
        background-color: #FFC84D;
      }
      .iconDiv img{
        width: 50rpx;
        height: 50rpx;
      }

    }
    #china-map {
      width: 100vw;
      height: 80vh;
    }
   .main-right-bottom-top-detail{
     display: flex;
     flex-direction: row;justify-content: center;align-items: center;
   }
  .main-right-bottom-top{
    display: flex;flex-direction: row;justify-content: space-between;align-items: center;
  }
  .main-left-top-data > :first-child{
    margin-right: 2vh;
  }
  .main-left-top-data > :last-child{
    margin-left: 2vh;
  }
  .main-left-top-data-view{
      width: 5vw;height: 12vh;border-radius: 0.5vw;
      color: white;display: flex;justify-content: space-around;align-items: center;flex-direction: column;
      padding: 20rpx 0rpx;
  }
  .main-left-top-data-view-value{
    font-weight: bold;font-size: 36rpx;
  }
  .orgNumBg{
    background: #8674FE;
  }
  .stuNumBg{
    background: #66C8FF;
  }
  .teacherNumBg{
    background: #FD8F67;
  }
  .main-left-top-data{
    height: 15vh;display: flex;flex-direction: row;
  }

  .main-left-top-img-view{
    width: 17vw;margin-bottom: 1vh;
  }
  .main-left-top-img-view img{
    height: 1.5vh;width: 10vw;
  }
  .paihangbangChart{
    background: white;
    border-radius: 1vw;
    border: 1px solid red;
  }
  .main-left-top-orgData {
    font-size: 1.1vw;font-weight: bold;width: 17vw;
  }
  /deep/ .el-table__header-wrapper th {
    background-color: #f2f2f2; /* 设置背景色 */
    color: #333; /* 设置字体颜色 */
    font-size: 36rpx;
    font-weight: bold; /* 设置字体加粗 */
  }
	.content {
		background: url("/static/images/index-bg.png") repeat-y;
		background-size: 100vw 100vh;
		width: 100vw;
		height: 100vh;
	}
  .content .main{
    display: flex;
  }
  .main .main-left{
    width: 25vw;
    border: 1px solid;
    height: 88vh;
  }
  .main .main-left{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .main .main-left .main-left-top{
    height: 32vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .main .main-left .main-left-bottom{
    height: 51vh;
    background: white;
    border-radius: 0.5vw;
    padding: 0vw 1vw;
  }
  .main-left-bottom{
    width: 15vw;
  }
  .main-left-bottom-title{
    margin: 2vh 0vh;
    border-bottom: 10rpx solid #FEA342;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .main-left-bottom-title-top{
    background: url("/static/images/main-left-bottom-nav.png") no-repeat;
    padding-left: 70rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .main-left-bottom-title-top span{
    font-size: 36rpx;
    font-weight: bold;
  }
  .title-num{
    font-size: 50rpx;
    font-weight: bold;
  }
  .title-unit{
    font-size: 32rpx;
  }
  .main-left-bottom-content{
    width: 15vw;
    height: 40vh;
    border: 1rpx solid #FEA342;
    overflow: hidden;
  }
  .main .main-right{
    width: 75vw;
    border: 1px solid;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }


  .main-right-top{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: 1px solid;
    height: 65vh;
  }

  .main-right-top-left{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 50vw;
    color: #fff;
  }
  .main-right-top-right{
    height: 65vh;
    width: 25vw;
  }
  .main-right-top-right-exit{
    height: 11vh;
    border: 1px solid green;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 2rem;
  }
  .main-right-top-right-data{
    height: 44vh;
    border: 1px solid orange;
  }
  .main-right-bottom{
    height: 23vh;
    border: 1px solid;
  }
  .content .header{
		background: url("/static/images/index-top.png") repeat-x;
		background-size: 100% 100%;
		width: 100vw;
		height: 12vh;
		display: flex;
		justify-content: space-around;
	}
	.header .dateStype{
		font-size: 40rpx;
		color: #11A2F0;
		font-weight: bold;
		width: 50vw;
		display: flex;
	    align-items: center;
		height: 50%;
	}
	.header .dateStype text:first-child{
		margin-left: 100rpx;
	}
	.header .dateStype text{
		margin-right: 40rpx;
	}
	.header .tianStyle{
		font-size: 40rpx;
		color: #11A2F0;
		font-weight: bold;
		width: 50vw;
		display: flex;
		align-items: center;
		justify-content: right;
		height: 50%;
		padding-right: 100rpx;
	}
	.tianStyle text{
		margin-right: 40rpx;
	}
</style>
